<template>
  <div class="security">
    <h1>完成社保认证，参加线下招聘会！</h1>
    <div class="pic_box">
      <h3>缴费证明</h3>
      <p>
        <i class="icon_blue"></i>单位缴纳社保的相关缴费证明，如缴费的单据回执等
      </p>
      <div class="upload">
        <el-upload ref="upload" class="upload-demo" action :limit="5" :http-request="postPic" :show-file-list="false"
          :file-list="fileList" list-type="picture">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
        <ul>
          <li v-for="(item,index) in 5" :key="index">
            <img :src="fileList[index]?fileList[index].filePath:null" @click="()=>{handleRemove(index)}" alt />
          </li>
        </ul>
      </div>
    </div>
    <div class="btn_box">
      <el-button class="submit" @click="onSubmit" :loading="loading" v-loading.fullscreen.lock="loading">提交审核
      </el-button>
      <el-button class="back" @click="back">返回首页</el-button>
    </div>
  </div>
</template>

<script>
import { postPicture, companySsAuth } from '../../../api/index';
import { companySsAuthInfo } from '../../../api/home';
export default {
  data () {
    return {
      loading: false,
      id: '',
      fileList: []
    };
  },
  mounted () {
    let companyId = this.$route.query.companyId;
    console.log(companyId);

    if (companyId) {
      // 获取信息并解析认证照片
      companySsAuthInfo({ companyId }).then(data => {
        if (data.success) {
          console.log(data);
          this.form = data.data || {};
          this.fileList = data.data.companySsAuthFileInVoList || [];
          this.id = data.data.id || '';
        }
      });
    }
  },
  methods: {
    // 删除照片
    handleRemove (num) {
      let file = this.fileList.find((item, index) => index === num);
      this.fileList = this.fileList.filter((item, index) => index !== num);
      console.log(this.$refs.upload);
      console.log(this.fileList);
      if (file) {
        console.log(file.file);
        this.$refs.upload.onRemove(file, this.fileList);
      }
    },
    // 上传照片
    postPic (param) {
      let obj = {};
      obj.file = param.file;
      let fd = new FormData();
      fd.append('file', param.file);
      postPicture(fd).then(data => {
        if (data.success) {
          obj.filePath = data.data.fileUrl;
          console.log(data);
          this.fileList.push(obj);
          console.log(this.fileList);
        } else {
          this.$message.error(`${data.msg}`);
        }
      });
    },
    // 返回首页
    back () {
      this.$router.push({ path: '/' });
    },
    // 保存
    onSubmit () {
      if (this.fileList.length === 0) {
        this.$alert('请上传', '提示');
        return;
      }
      this.loading = true;
      let companySsAuthFileInVoList = this.fileList.map(item => {
        let query = {};
        console.log(item);
        query.filePath = item.filePath;
        if (item.companyId) {
          query.fileSize = item.fileSize;
        } else {
          query.fileSize = item.file.size;
        }
        query.type = 1;
        return query;
      });

      companySsAuth({ id: this.id, companySsAuthFileInVoList }).then(data => {
        if (data.success) {
          this.loading = false;
          this.$message.success('提交审核成功');
          this.$router.push({ path: '/' });
        } else {
          this.loading = false;
          this.$message.error(`${data.msg}`);
          this.$router.push({ path: '/' });
        }
      });
    }
  }
};
</script>

<style scoped>
.security {
    background: rgba(255, 255, 255, 1);
}
.security p {
    padding-left: 357px;
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    color: rgba(85, 85, 85, 1);
    opacity: 1;
    margin-top: 44px;
}
.security h3 {
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 20px;
    color: rgba(34, 34, 34, 1);
    opacity: 1;
    margin: 23px 0 4px;
}
.security h3::after {
    display: block;
    content: '';
    width: 28px;
    border: 1px solid rgba(24, 147, 252, 1);
    opacity: 1;
    border-radius: 2px;
}
.icon_blue {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: rgba(0, 147, 255, 1);
    border-radius: 50%;
    opacity: 1;
    margin-right: 10px;
}
.security h1 {
    height: 28px;
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 22px;
    color: rgba(0, 147, 255, 1);
    opacity: 1;
    padding: 28px 45px 13px;
    border-bottom: 1px solid rgba(232, 232, 232, 1);
}
.security .upload {
    width: 630px;
    margin: 32px auto 0;
    position: relative;
}
.security .upload /deep/ .upload-demo {
    vertical-align: top;
    display: inline-block;
    width: 94px;
    height: 24px;
    background: rgba(24, 147, 252, 1);
    opacity: 1;
    margin-right: 24px;
}
.security .upload /deep/ .el-button {
    width: 94px;
    height: 24px;
    background: rgba(24, 147, 252, 1);
    opacity: 1;
    line-height: 0;
}
.security .upload ul {
    display: inline-block;
    list-style: none;
    width: 500px;
    overflow: hidden;
}
.security .upload ul li {
    float: left;
    width: 124px;
    height: 124px;
    margin-right: 40px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(24, 147, 252, 1);
    opacity: 1;
    margin-bottom: 24px;
}
.security .upload ul li img {
    width: 100%;
    height: 100%;
}

.security .pic_box {
    width: 1105px;
    height: 500px;
    border-bottom: 1px solid rgba(232, 232, 232, 1);
    opacity: 1;
    margin: 0 auto;
}
.security .btn_box {
    height: 140px;
    line-height: 140px;
    text-align: center;
}
.security .submit {
    width: 148px;
    height: 49px;
    background: rgba(0, 147, 255, 1);
    opacity: 1;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 22px;
    color: rgba(255, 255, 255, 1);
}
.security .back {
    width: 146px;
    height: 47px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(24, 147, 252, 1);
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 22px;
    color: rgba(24, 147, 252, 1);
    opacity: 1;
    margin-left: 32px;
}
</style>